@import "common";

header {
  line-height: 6.8vw;
  height: 6.8vw;
  position: relative;
  background: linear-gradient(to right, #00f6ff, #27a7e4);
  background: -webkit-linear-gradient(to right, #00f6ff, #27a7e4);
  .right {
    position: absolute;
    width: 9.8vw;
    right: 1.4vw;
    top: 2vw;
  }
  .back {
    position: absolute;
    width: 3.2vw;
    left: 1.4vw;
    top: 1.6vw;
  }
}

#headers {
  position: relative;
  padding: 2.9vw 0 0.3vw;
  color: #ffffff;
  font-size: 6vw;
}

.box {
  padding: 1.4vw;
  /*  background-color: #fff;*/
  margin-top: 1.4vw;
  font-size: 6.2vw;
}

.number {
  width: 24.5vw;
  /* line-height: 207px;*/
  /* background-color: #1cbdeb;*/
  font-size: 7.18vw;

}

.greens_img {
  width: 28.4vw;
  height: 28.4vw;
  margin-left: 1.4vw;
  //img {
  //  margin-left: 1vw;
  //}
}

.width-200 {
  width: 15.6vw;
}

.padding-l40 {
  padding-left: 3vw;
}

.imga {
  width: 15.6vw;
  height: 15.6vw;
}

.btn {
  width: 10.9vw;
  .txt {
    color: #fffefe;
    line-height: 0.65vw;
    background-color: #1cbdeb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
  .Visited {
    background-color: #efeff4;
    color: #999999;
  }
}

.search {
  padding: 1.4vw;
  input {
    padding: 0 2.8vw;
    line-height: 5vw;
    border-radius: 2.9vw;
    border: none;
    width: 100%;
  }
  .input {
    padding-right: 1.4vw;
    width: 100%;
  }
  .search_text {
    background-color: #1cbdeb;
    width: 10.9vw;
    line-height: 5vw;
    display: inline-block;
    border-radius: 4px;
  }
}

::-webkit-input-placeholder {
  color: #999999;
}

.contain {
  overflow: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.main {
  background-color: #fff;
  padding: 0 1.4vw;
  .padding-20 {
    padding: 1.4vw 0;
    border-bottom: 1px solid #efefef;
    &:last-child {
      border-bottom: none;
    }
    .tab {
      width: 70vw;
      margin: 0 auto;
      border-radius: 50px;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
      overflow: hidden;
      line-height: 5vw;
      .tab-list {
        width: 33%;
        background-color: #efeff4;
      }
      .active {
        background-color: #1cbdeb;
        color: #fff;
      }
    }
  }
}

.half {
  width: 48vw;
  padding: 1.4vw;
  &:nth-of-type(odd) {
    padding-right: 1.4vw;
    /* margin: 20px 20px 0 30px;*/
    border-right: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
  }
  &:nth-of-type(even) {
    padding-left: 1.4vw;
    border-bottom: 1px solid #efefef;
  }
}

.half2 {
  width: 100%;
  padding: 2.3vw 1.4vw;
  border-bottom: 1px solid #efefef;
}

.half3 {
  width: 48vw;
  padding: 1.4vw;
  &:nth-of-type(odd) {
    padding-right: 1.4vw;
    margin: 1.4vw 1.4vw 0 23.4vw;
    border-bottom: 1px solid #efefef;
  }
  &:nth-of-type(even) {
    padding-left: 1.4vw;
    border-bottom: 1px solid #efefef;
  }
}

.img_box {
  width: 30vw;
}

.meals {
  .meals_number {
    display: inline-block;
    width: auto;
    text-align: center;
    line-height: 4.6vw;
    margin: 0.7vw 1.4vw 0.7vw 0;
    padding: 0 1.4vw;
    background-color: #fff;
    border-radius: 4px;
    color: #2a2a2a;
    border: 1px solid #dfdfdf;
  }
  .active_number {
    background-color: #1cbdeb;
    color: #fff;
    border: 1px solid #1cbdeb;
  }
  .order_btn {
    width: 15.6vw;
    line-height: 6.2vw;
    display: inline-block;
    border-radius: 4px;
    color: #fffefe;
  }
}

.name {
  display: inline-block;
  margin-right: 3vw;
}

.pop-box {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  .pop-hint {
    width: 5vw;
    background-color: #fff;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 14px;
    margin-top: 22.6vw;
    box-shadow: 1px -6px 0 -1px #1cbdeb;
    .border-top {
      border-top: 1px solid #efefef;
      .pop-btn {
        width: 50%;
        display: inline-block;
        line-height: 6.8vw;
        color: #2a2a2a;
        border-right: 1px solid #efefef;
        &:last-child {
          border-right: none;
        }
      }
      .font-blue {
        color: #1cbdeb;
      }
    }
    .hint-txt {
      padding: 8.5vw 0;
    }
  }
}

.width-400 {
  width: 31.25vw;
}

.state {
  background-color: #1cbdeb;
  color: #ffffff;
  margin-left: 1.4vw;
  font-size: 1.4vw;
  padding: 4px;
}

.state2 {
  background-color: #ff5a5e;
}

//公共样式
.hide {
  display: none;
}

.show {
  display: block;
}

.font-28 {
  font-size: 2vw;
}

.font-32 {
  font-size: 2.5vw;
}

.font-36 {
  font-size: 2.8vw;
}

.font-40 {
  font-size: 3vw;
}

.font-48 {
  font-size: 3.75vw;
}

.font-66 {
  font-size: 5.1vw;
}

.font-72 {
  font-size: 5.6vw;
}

.font-86 {
  font-size: 6vw;
}

.font-120 {
  font-size: 9.3vw;
}

.font-white {
  color: #fff;
}

.font-blue {
  color: #1cbdeb;
}

.font-gray {
  color: #666666;
}

.font-gray2 {
  color: #999999;
}

.bg_green {
  background-color: #1ec163;
}

.bg_orange {
  background-color: #ff7f29;
}

.bg_white {
  background-color: #fff;
}

.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

/*圆加载*/
.circle-loadding {
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  z-index: 9999;
  circle {
    fill: #fff;
  }
}

#loadding {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 10000;
}
.border-t{
  border-top: 1px solid #e6e6e6;
}